<script setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus';
import { loginStore } from "@/stores/loginStore.js";

const store = loginStore();

const login_name = ref("admin");
const password = ref("admin123");

const login_submit = async () => {
    if (!login_name.value || !password.value) {
        // 显示错误提示
        ElMessage.error('请输入用户名和密码！')
    }
    else {
        // 登录验证用户，获取token，
        await store.store_login({ login_name: login_name.value, password: password.value })
    }
};
</script>

<template>
    <div class="login">
        <div class="login-wrap">
            <div class="title">安全生产隐患排查系统</div>
            <!-- 表单开始 -->
            <el-form label-width="60px" label-position="right">
                <el-form-item label="用户名" prop="login_name">
                    <el-input placeholder="用户名" v-model="login_name" clearable />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="密码" v-model="password" type="password" show-password clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login_submit(ruleFormRef)" class="w-full mt-4">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
.login {
    background-color: #f0f2f5;
    position: absolute;
    height: 100vh;
    width: 100%;
}

.login-wrap {
    width: 600px;
    margin: 160px auto 0 auto;
    border-radius: 35px;
    padding: 50px 100px;
}

.title {
    font-size: 30px;
    text-align: center;
    margin-bottom: 30px;
    color: #000;
}
</style>
